<template>
  <view>
    <view class="top">
      <view class="swiper">
        <!--轮播 -->
        <swiper @change="SwiperTab" :current="uCurrent" :indicator-dots="false" :interval="3000" :duration="400"
          :autoplay='true' :circular='true' class="swiper">
          <swiper-item v-for="(item,index) in xq1" :key='index'>
            <image :src="item"></image>
          </swiper-item>
        </swiper>
        <!-- 更改指示器样式指示器：数字胶囊 -->
        <block class="number">
          <view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ xq1.length }}</view>
        </block>
      </view>
    </view>

    <view class="center">
      <text style="font-size: 32rpx; margin-left: 17rpx; line-height: 90rpx;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;">{{xq.name}}\n</text>
      
      <text style="font-size: 26rpx; color: #ccc; float: left; margin: 0rpx 14rpx;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;">{{xq.desc}}</text>
    </view>
<block v-if="xq.advantage">
    <image src="../../static/bc2.png" mode="" style="width: 226rpx; height: 16rpx; margin: 0 270rpx;"></image>
    <text style="font-size: 32rpx; float: left; margin: -40rpx 313rpx; font-weight: 600;">产品优势</text>

    <view class="cp">
      <text style="font-size: 26rpx;  line-height: 95rpx; display: block; text-align: center; overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;">{{xq.advantage}}</text>
    </view>
</block>
<block v-if="xq.content">
    <image src="../../static/bc2.png" mode="" style="width: 226rpx; height: 16rpx; margin: 0 270rpx;"></image>
    <text style="font-size: 32rpx; float: left; margin: -40rpx 313rpx; font-weight: 600;">产品详情</text>
    
    <view class="xq">
      <rich-text v-html="xq.content"
        style="font-size: 26rpx; color: #737579; float: left; margin-top: 20rpx;"></rich-text>
    </view>
</block>

    <!-- <view class="tu">
      <image :src="xq.image" mode="" style="width: 100%; height: 100%;"></image>
    </view>
 -->
  <!--  <view class="xqnr">
      <rich-text v-html="xq.content"
        style="font-size: 26rpx; color: #737579; float: left; margin: 10rpx 10rpx; margin-right: 0rpx;"></rich-text> -->
      <!-- <view class="xqnr_l">
        <view class="one" style="width: 343rpx; height: 96rpx; border-bottom: 1rpx solid #4575FC;">
          <text
            style="font-size: 26rpx; font-weight: 600; line-height: 96rpx; display: block; text-align: center;">德通搅拌</text>
        </view>

        <view class="one" style="width: 343rpx; height: 74rpx; border-bottom: 1rpx solid #4575FC;">
          <text
            style="font-size: 26rpx; line-height: 74rpx; display: block; text-align: center; color: #737579;">搅拌不抱轴，安全隐患少</text>
        </view>

        <view class="one" style="width: 343rpx; height: 84rpx; border-bottom: 1rpx solid #4575FC;">
          <text
            style="font-size: 26rpx; line-height: 84rpx; display: block; text-align: center; color: #737579;">同配比提高强度 8%以上</text>
        </view>

        <view class="one" style="width: 343rpx; height: 84rpx; border-bottom: 1rpx solid #4575FC;">
          <text style="font-size: 26rpx; line-height: 84rpx; display: block; text-align: center; color: #737579;">节约水泥用量5% 以上</text>
        </view>

        <view class="one" style="width: 343rpx; height: 84rpx; ">
          <text
            style="font-size: 26rpx; line-height: 84rpx; display: block; text-align: center; color: #737579;">耐久性显著提高</text>
        </view>
      </view> -->

      <!-- <view class="xqnr_r">
        <view class="one" style="width: 343rpx; height: 96rpx; border-bottom: 1rpx solid #4575FC;">
          <text
            style="font-size: 26rpx; font-weight: 600; line-height: 96rpx; display: block; text-align: center;">其他机械</text>
        </view>

        <view class="one" style="width: 343rpx; height: 74rpx; border-bottom: 1rpx solid #4575FC;">
          <text
            style="font-size: 26rpx; line-height: 74rpx; display: block; text-align: center; color: #737579;">搅拌抱轴，安全隐患多</text>
        </view>

        <view class="one" style="width: 343rpx; height: 84rpx; border-bottom: 1rpx solid #4575FC;">
          <text
            style="font-size: 26rpx; line-height: 84rpx; display: block; text-align: center; color: #737579;">同配比提高强度弱</text>
        </view>

        <view class="one" style="width: 343rpx; height: 84rpx; border-bottom: 1rpx solid #4575FC;">
          <text
            style="font-size: 26rpx; line-height: 84rpx; display: block; text-align: center; color: #737579;">浪费水泥</text>
        </view>

        <view class="one" style="width: 343rpx; height: 84rpx; ">
          <text
            style="font-size: 26rpx; line-height: 84rpx; display: block; text-align: center; color: #737579;">毫无耐久性，易坏</text>
        </view>
      </view> -->
    <!-- </view> -->

   <!-- <view class="xq_1">
      <image src="../../static/tu2.png" mode="" style="width: 100%; height:518rpx ;"></image>
    </view>

    <view class="xq_2">
      <image src="../../static/tu1.png" mode="" style="width: 100%; height:219rpx ;"></image>
    </view> -->
  </view>
</template>

<script>
  import {
    cpxq
  } from '@/api/api.js'
  export default {
    name: "swiperDots",
    props: {
      swiperList: Array,
      mode: String
    },
    data() {
      return {
        xq: '',
        xq1: "",
        id: '',
        uCurrent: 0,

        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500
      }
    },
    onLoad(options) {
		//分享微信好友
		if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share();
		}
      console.log(options)
      this.id = options.id
      this.c_pxq()
    },
    methods: {
      SwiperTab(e) {
        this.uCurrent = Number(e.target.current)
        console.log(this.uCurrent);
      },
      changeIndicatorDots(e) {
        this.indicatorDots = !this.indicatorDots
      },
      changeAutoplay(e) {
        this.autoplay = !this.autoplay
      },
      intervalChange(e) {
        this.interval = e.target.value
      },
      durationChange(e) {
        this.duration = e.target.value
      },
      c_pxq: function() {
        cpxq({
          id: this.id
        }).then(res => {
          console.log(res)
          this.xq = res.data;
          this.xq1 = res.data.images
        })
      },


    },





  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #F1F1F1;
  }

  .top {
    width: 100%;
    height: 577rpx;
    // background-color: red;
  }

  .center {
    width: 720rpx;
    height: 146rpx;
    margin: 40rpx auto;
    background-color: #fff;
  }

  /deep/uni-swiper {
    height: 577rpx;
  }

  .cp {
    width: 686rpx;
    height: 95rpx;
    margin: 30rpx auto;
    background-color: #e7eaf2;
  }

  .tu {
    width: 100%;
    height: 444rpx;
    margin: 30rpx 0rpx;
    // background-color: red;
  }

  .xqnr {
    width: 686rpx;
    height: 423rpx;
    margin: 0 auto;
    background-color: #e7eaf2;
    border: 1rpx solid #80A5FF;

    .xqnr_l {
      width: 343rpx;
      height: 423rpx;
      background-color: #e7eaf2;
      border-right: 1rpx solid #80A5FF;
      border-bottom: 1rpx solid #80A5FF;
    }

    .xqnr_r {
      width: 343rpx;
      height: 423rpx;
      float: right;
      margin-top: -423rpx;
      background-color: #e7eaf2;
      border-left: 1rpx solid #80A5FF;
      border-bottom: 1rpx solid #80A5FF;
    }
  }

  .xq_1 {
    width: 100%;
    height: 518rpx;
    margin-top: 10rpx;
  }

  .xq_2 {
    width: 100%;
    height: 219rpx;
    margin-top: 10rpx;
  }

  .swiper {
    width: 100%;
    height: 600rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    /* 指示器样式 */
    .u-indicator-item-number {
      width: 40px;
      padding: 10rpx;
      line-height: 1;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 100rpx;
      font-size: 30rpx;
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      right: 2%;
      bottom: 3%;
      text-align: center;
      letter-spacing: 3rpx;
    }
  }
  .xq{
    width: 100%;
    height: 100%;
  }
</style>
